import { useState } from "react";
import MainLayout from "../layouts/MainLayout";

function Home() {
  const [count, setCount] = useState(0);

  return (
    <MainLayout>
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold">Welcome to the Home Page</h1>
        <p className="text-lg">This is a simple counter example:</p>
        <div className="flex justify-center items-center space-x-4">
          <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
            onClick={() => { setCount(count - 1) }}
          >
            -
          </button>
          <span className="text-2xl">{count}</span>
          <button className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700"
            onClick={() => { setCount(count + 1) }}
          >
            +
          </button>
        </div>
      </div>
    </MainLayout>
  );
}

export default Home;